<template>
    <div class="banner">
        <ul class="left">
            <li>
                <router-link to="/aboutus">关于</router-link>
            </li>
            <li>
                <router-link to="/recruit">招贤纳士</router-link>
            </li>
        </ul>
        <ul class="right">
            <li v-if="logged">
                <el-button @click="logout" type="warning" plain>登出</el-button>
            </li>
            <li v-else>
                <el-button @click="login" type="primary" plain>登录</el-button>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "banner",
    data() {
        return {
            logged: false
        };
    },
    props: {},
    computed: {},
    methods: {
        login() {
            let ok = res => {
                this.logged = true;
            };
            let err = error => {
                this.logged = true;
            };
            this.$http
                .post("/user/login", {
                    username: "super",
                    password: "123456"
                })
                .then(ok)
                .catch(err);
        },
        logout() {
            this.$http
            .post("/user/logout")
            .then(res => {
                logged = false;
            })
            .catch(error => {
                console.log(error);
            });
        }
    }
};
</script>

<style lang="less" scoped>
.banner {
    background-color: lightskyblue;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;

    flex: 0 0 40px;

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .left {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;

        li {
            margin: 0 0 0 20px;
            cursor: pointer;
        }
    }

    .right {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
        align-items: center;

        li {
            margin: 0 20px 0 0;
            cursor: pointer;
        }
    }
}
</style>
